revision:
Syntax: $(selector).data(name)
The data() method attaches data to, or gets data from, selected elements.
Tip: to remove data, use the removeData() method.
Parameters:
name : Optional. Specifies the name of data to retrieve. If no name is specified, this method will return all stored data for the element as an object.
<div id="div1">
<button id="btn1">Attach data to div element</button><br>
<button id="btn2">Get data attached to div element</button>
</div>
<script>
$(document).ready(function(){
$("#div1 #btn1").click(function(){
$("div").data("greeting", "Hello World");
});
$("#div1 #btn2").click(function(){
alert($("div").data("greeting"));
});
});
</script>
Syntax: $(selector).each(function(index,element))
The each() method specifies a function to run for each matched element.
Tip: return false can be used to stop the loop early.
Parameters:
function(index,element) : required. A function to run for each matched element: "index" - the index position of the selector; "element" - the current element (the "this" selector can also be used).
<div id="div2">
<button>Alert the value of each list item</button>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Soda</li>
</ul>
</div>
<script>
$(document).ready(function(){
$("#div2 button").click(function(){
$("li").each(function(){
alert($(this).text())
});
});
});
</script>
Syntax: $(selector).get(index)
The get() method gets the DOM elements specified by the selector.
Parameters:
index : optional. Specifies which of the matching elements to get (by index number).
This is a paragraph
<div id="div3">
<p>This is a paragraph</p>
<button>Get the p DOM element</button>
<div></div>
</div>
<script>
$(document).ready(function(){
$("#div3 button").click(function(){
var x = $("#div3 p").get(0);
$("#div3 div").text(x.nodeName + ": " + x.innerHTML);
});
});
</script>
Syntax: $(selector).index() or $(selector).index(element)
The index() method returns the index position of specified elements relative to other specified elements. The elements can be specified by jQuery selectors, or a DOM element.
Note: If the element is not found, index() will return -1.
Parameters:
element : optional. Specifies the element to get the index position of. Can be a DOM element or a jQuery selector
Click the list items to get the index position, relative to its sibling elements
<div id="div4">
<p>Click the list items to get the index position, relative to its sibling elements</p>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Soda</li>
</ul>
</div>
<script>
$(document).ready(function(){
$("#div4 li").click(function(){
alert($(this).index());
});
});
</script>
Syntax: $.noConflict(removeAll)
The noConflict() method releases jQuery's control of the $ variable. This method can also be used to specify a new custom name for the jQuery variable.
Tip: this method is useful when other JavaScript libraries use the $ for their functions.
Parameters:
removeAll : optional. A Boolean value that specifies whether or not to release jQuery's control of ALL jQuery variables (including "jQuery")
This is a paragraph.
This is another paragraph.
Example neutralized due to impact on other exampls
<div id="div5">
<h4>This is a heading</h4>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</div>
<script>
var jq = $.noConflict();
jq(document).ready(function(){
jq("#div5 button").click(function(){
jq("#div5 p").hide();
});
});
</script>
Syntax: $.param(object,trad)
The param() method creates a serialized representation of an array or an object. The serialized values can be used in the URL query string when making an AJAX request.
Parameters:
object : required. Specifies an array or object to serialize
trad: optional. A Boolean value specifying whether or not to use the traditional style of param serialization
<div id="div6">
<button>Serialize object</button>
<div></div>
</div>
<script>
$(document).ready(function(){
personObj = new Object();
personObj.firstname = "John";
personObj.lastname = "Doe";
personObj.age = 50;
personObj.eyecolor = "blue";
$("#div6 button").click(function(){
$("#div6 div").text($.param(personObj));
});
});
</script>
Syntax: $(selector).removeData(name)
The removeData() method removes data previously set with the data() method.
Parameters:
name : optional. Specifies the name of data to remove. If no name is specified, this method will remove all stored data from the selected elements
<div id="div7">
<button id="btn1">Attach data to div element</button><br>
<button id="btn2">Remove data attached to div element</button>
<div></div>
</div>
<script>
$(document).ready(function(){
$("#div7 #btn1").click(function(){
$("#div7 div").data("greeting", "Hello World");
alert("Greeting is: " + $("#div7 div").data("greeting"));
});
$("#div7 #btn2").click(function(){
$("#div7 div").removeData("greeting");
alert("Greeting is: " + $("#div7 div").data("greeting"));
});
});
</script>
Syntax: $(selector).toArray()
The toArray() method returns the elements matched by the jQuery selector as an array.
Parameters: none
<div id="div8">
<button>Alert the value of each list item</button>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Soda</li>
</ul>
</div>
<script>
$(document).ready(function(){
$("#div8 button").click(function(){
var i;
var x = $("#div8 li").toArray()
for (i = 0; i< x.length; i++) {
alert(x[i].innerHTML);
}
});
});
</script>